<template>
<Row :gutter="10" style="padding: 10px">
  <iCol span="4" style="text-align: center;">
    <div class="ivu-card" style="background: rgb(25, 190, 107);">
      <div class="ivu-card-body">
        <h1 style="color: #fff">{{ statusFirst }}</h1>
        <h5 style="color: #fff">匹配金额</h5>
      </div>
    </div>
  </iCol>

  <iCol span="4" style="text-align: center;">
    <div class="ivu-card" style="background: rgb(255, 153, 0);">
      <div class="ivu-card-body">
        <h1 style="color: #fff">{{ statusSecond }}</h1>
        <h5 style="color: #fff">未匹配金额</h5>
      </div>
    </div>
  </iCol>

  <iCol span="4" style="text-align: center;">
    <div class="ivu-card" style="background: rgb(45, 140, 240);">
      <div class="ivu-card-body">
        <h1 style="color: #fff">{{ statusSecond }}</h1>
        <h5 style="color: #fff">等待匹配金额</h5>
      </div>
    </div>
  </iCol>
</Row>
</template>

<script>
import { Row, Col } from 'iview';
import ajaxiView from '@/utils/ajaxiView';
import auth from '@/utils/auth';

export default {
  components: {
    [Row.name]: Row,
    [Col.name]: Col
  },
  data() {
    return {
      token: auth.getToken(),
      statusFirst: 0,
      statusSecond: 0
    };
  },
  methods: {
    _initialize() {
      this.getData();
    },
    getData() {
      let _this = this;
      ajaxiView.get('/backstage?token=' + _this.token).then(function(data) {
        if(data !== false) {
          _this.statusFirst = data.status_first;
          _this.statusSecond = data.status_second;
        }
      });
    }
  },
  mounted() {
    this._initialize();
  }
}
</script>

<style>
.infor-card-con {
  background-color: #000;
}
.infor-card-icon-con {
  height: 100%;
}
.height-100{
  height: 100%;
}
.infor-card-con{
  height: 100px;
}
.infor-intro-text{
  font-size:12px;
  font-weight:500;
  color:#C8C8C8;
}
</style>